<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.num" placeholder="客户编号" style="width: 150px;" class="filter-item" />
      <el-input v-model="listQuery.name" placeholder="客户名称" style="width: 150px;" class="filter-item" />
      <el-input v-model="listQuery.phone" placeholder="电话" style="width: 150px;" class="filter-item" />
      <el-button :disabled="!((this.listQuery.num && this.listQuery.num !== '') || (this.listQuery.name && this.listQuery.name !== '') || (this.listQuery.phone && this.listQuery.phone !== ''))" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="success" icon="el-icon-refresh-left" @click="handleReset">
        重置
      </el-button>
      <el-button class="filter-item fr" type="warning" icon="el-icon-plus" @click="handleCreate">
        新增
      </el-button>
    </div>

    <el-table :data="tableData" stripe max-height="600">
      <el-table-column prop="cuntomNum" label="客户编号" />
      <el-table-column prop="customName" label="客户名称" />
      <el-table-column prop="customAddres" label="客户地址" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="fox" label="传真" />
      <el-table-column prop="email" label="email" />
      <el-table-column prop="contect" label="联系人" />
      <el-table-column prop="contectAddress" label="联系人地址" />
      <el-table-column label="创建时间">
        <template slot-scope="{ row }">
          <span>{{ new Date(row.createTime) | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>8"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 新增/编辑 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="客户编号" prop="cuntomNum">
          <el-input v-model="temp.cuntomNum" />
        </el-form-item>
        <el-form-item label="客户名称" prop="customName">
          <el-input v-model="temp.customName" />
        </el-form-item>
        <el-form-item label="客户地址" prop="customAddres">
          <el-input v-model="temp.customAddres" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="temp.phone" />
        </el-form-item>
        <el-form-item label="传真" prop="fox">
          <el-input v-model="temp.fox" />
        </el-form-item>
        <el-form-item label="email" prop="email">
          <el-input v-model="temp.email" />
        </el-form-item>
        <el-form-item label="联系人" prop="contect">
          <el-input v-model="temp.contect" />
        </el-form-item>
        <el-form-item label="联系人地址" prop="contectAddress">
          <el-input v-model="temp.contectAddress" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { allCustomer, findCustomer, addCustomer, updateCustomer, delCustomer } from '@/api'
import Pagination from '@/components/Pagination'

export default {
  name: 'Customer',
  components: {
    Pagination
  },
  data() {
    return {
      listQuery: {
        num: '', // 客户编号
        name: '', // 客户名称
        phone: '', // 电话
        page: 1,
        limit: 8
      },
      tableData: [],
      total: 0,
      temp: {
        id: '',
        cuntomNum: '', // 客户编号
        customName: '', // 客户名称
        customAddres: '', // 客户地址
        phone: '',
        fox: '',
        email: '',
        contect: '',
        contectAddress: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑客户',
        create: '新增客户'
      },
      rules: {
        cuntomNum: [{ required: true, message: 'customNum is required', trigger: 'blur' }],
        customName: [{ required: true, message: 'customName is required', trigger: 'blur' }],
        customAddres: [{ required: true, message: 'customAddress is required', trigger: 'blur' }],
        phone: [{ required: true, message: 'phone is required', trigger: 'blur' }],
        fox: [{ required: true, message: 'fox is required', trigger: 'blur' }],
        email: [{ required: true, message: 'email is required', trigger: 'blur' }],
        contect: [{ required: true, message: 'contect is required', trigger: 'blur' }],
        contectAddress: [{ required: true, message: 'contectAddress is required', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.fetchAll()
  },
  methods: {
    // 筛选
    handleFilter() {
      findCustomer({ cuntomNum: this.listQuery.num, customName: this.listQuery.name, phone: this.listQuery.phone }).then((res) => {
        this.tableData = res.data
      })
    },
    // 重置
    handleReset() {
      this.listQuery.num = ''
      this.listQuery.name = ''
      this.listQuery.phone = ''
      this.fetchAll()
    },
    // 客户列表
    fetchAll() {
      const { limit, page } = this.listQuery
      allCustomer({ currentPage: page, pageSize: limit }).then(res => {
        this.tableData = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 重置表单
    resetTemp() {
      this.temp = {
        id: '',
        cuntomNum: '', // 客户编号
        customName: '', // 客户名称
        customAddres: '', // 客户地址
        phone: '',
        fox: '',
        email: '',
        contect: '',
        contectAddress: ''
      }
    },
    // 点击新增
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 新增客户
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addCustomer(this.temp).then(() => {
            this.fetchAll()
            this.dialogFormVisible = false
            this.$notify({
              title: '新增客户',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 更新客户
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateCustomer(this.temp).then(() => {
            this.fetchAll()
            this.dialogFormVisible = false
            this.$notify({
              title: '编辑供应商',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 编辑
    handleEdit(row) {
      this.resetTemp()
      const { id, cuntomNum, customName, customAddres, phone, fox, email, contect, contectAddress } = row
      this.temp.id = id
      this.temp.cuntomNum = cuntomNum
      this.temp.customName = customName
      this.temp.customAddres = customAddres
      this.temp.phone = phone
      this.temp.fox = fox
      this.temp.email = email
      this.temp.contect = contect
      this.temp.contectAddress = contectAddress
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    // 删除
    handleDelete(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCustomer({ id: id }).then(() => {
          this.fetchAll()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页事件
    getList() {
      console.log('分页事件')
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //
      //   // Just to simulate the time of the request
      //   setTimeout(() => {
      //     this.listLoading = false
      //   }, 1.5 * 1000)
      // })
    }
  }
}
</script>
